import _ from 'lodash';
import {toJS} from 'mobx';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Modal, Row, Col, Form, Input, Select, Transfer} from 'antd';
import {InputItem} from '../../../../component/input/Input';
import {UserBaseFormStore} from '../UserStore';
import {toJSDeep} from '../../../common/store/Store';
import '../UserStyle.less';

const FormItem = Form.Item;

@observer
export class BuBaseFormModal extends React.Component<{store: UserBaseFormStore, title: string, onOk: Function},any> {

    render() {
        return (
            <Modal
                className = "userModal"
                maskClosable={false}
                title={this.props.title}
                onOk={this.ok(this)}
                onCancel={()=>{this.props.store.hide()}}
                width="800"
                visible={this.props.store.visible}>
                {this.props.children}
            </Modal>
        )
    }

    ok(me) {
        return function () {
            me.props.onOk(me);
        }
    }

    cancel(me) {
        return function () {
            me.props.onCancel(me);
        }
    }
}

@observer
export class UserBaseForm extends React.Component<{store: UserBaseFormStore},any> {
    handleChange(me){
        return function(nextTargetKeys, direction, moveKeys){
            const store:UserBaseFormStore = me.props.store;
            let targetKeys = toJS(store.fields.businessIds.value);

            if(direction === 'left'){
                _.remove(targetKeys,function(item){
                    return _.some(toJS(moveKeys),function(_item){
                        return _.parseInt(_item) === _.parseInt(item);
                    })
                })
            }else{
                targetKeys = _.flatten(targetKeys.concat(toJS(moveKeys)));
            }

            store.valid('businessIds',targetKeys,!store.fields.businessIds.required);
        }
    }

    filterOption(me){
        return function(inputValue, option){
            return _.includes(option.title,inputValue);
        }
    }

    render() {
        const store = this.props.store;

        const colStyle = {
            labelCol: { span: 6},
            wrapperCol: {span: 18}
        }

        return (
            <Row type="flex">
                <Col span={24}>
                    <FormItem
                        label= "用户绑定"
                        labelCol= {{span:3}}
                        wrapperCol= {{span:21}}
                        hasFeedback = {store.fields.businessIds.hasFeedback}
                        required = {store.fields.businessIds.required}
                        help = {store.fields.businessIds.help}
                        validateStatus = {store.fields.businessIds.validateStatus}>
                            <Transfer
                                listStyle={{
                                    width: 290,
                                    height: 290,
                                }}
                                showSearch
                                dataSource={toJSDeep(store.fields.businessIds.option)}
                                targetKeys={store.fields.businessIds.value}
                                onChange={this.handleChange(this)}
                                render= {item => item.title}
                                filterOption = {this.filterOption(this)}
                            />
                    </FormItem>
                </Col>
            </Row>
        )
    }
}

interface InputPassWordBean{
    type?: string;
    autosize?: any; 
    style?:any;
    store: any; 
    myKey: string; 
    title: string; 
    labelCol: any; 
    wrapperCol: any;
    anscy?: boolean;
    onChange?: Function;
    onBlur?: Function;
    onAnscyChange?: Function;
}

@observer
export class PassWordInput extends React.Component<InputPassWordBean,any>{
    render(){
        const {myKey, store, title, labelCol, wrapperCol, style, type, autosize, anscy = false} = this.props;
        const item = store.fields[myKey];

        return (
            <FormItem
                label={title}
                style={style}
                labelCol={labelCol}
                wrapperCol={wrapperCol}
                hasFeedback = {item.hasFeedback}
                required = {item.required}
                help = {item.help}
                validateStatus = {item.validateStatus}>
                <Input
                    type= {typeof type !== 'undefined' ? type : 'text'}
                    autosize = {typeof autosize !== 'undefined' ? autosize : false}
                    value={item.value}
                    disabled={item.disabled}
                    onChange={!anscy ? this.onChange : this.onAnscyChange}
                    onBlur={!anscy ? ()=>{} : this.onBlur}
                />
            </FormItem>
        )
    }

    onBlur = () =>{
        this.props.onBlur();
    }

    onAnscyChange = (e) =>{
        this.props.onAnscyChange(e.currentTarget.value);
    }

    onChange = (e) =>{
        this.props.onChange(e.currentTarget.value);
    }
}